<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="author" content="Bootstrap-ecommerce by Vosidiy">

	<title>Bootstrap ecommerce UI KIT - Alibaba example html template </title>

	<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">

	<!-- jQuery -->
	<script src="js/jquery-2.0.0.min.js" type="text/javascript"></script>

	<!-- Bootstrap4 files-->
	<script src="js/bootstrap.bundle.min.js" type="text/javascript"></script>
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

	<!-- Font awesome 5 -->
	<link href="fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

	<!-- plugin: fancybox  -->
	<script src="plugins/fancybox/fancybox.min.js" type="text/javascript"></script>
	<link href="plugins/fancybox/fancybox.min.css" type="text/css" rel="stylesheet">

	<!-- plugin: owl carousel  -->
	<link href="plugins/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
	<link href="plugins/owlcarousel/assets/owl.theme.default.css" rel="stylesheet">
	<script src="plugins/owlcarousel/owl.carousel.min.js"></script>

	<!-- custom style -->
	<link href="css/ui.css" rel="stylesheet" type="text/css"/>
	<link href="css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

	<!-- custom javascript -->
	<script src="js/script.js" type="text/javascript"></script>

	<script type="text/javascript">
        /// some script

        // jquery ready start
        $(document).ready(function() {
            // jQuery code

        });
        // jquery end
	</script>

</head>
<body>
<header class="section-header">
	<nav class="navbar navbar-expand-lg navbar-light">
		<div class="container">
			<a class="navbar-brand" href="#"><img class="logo" src="images/logos/logo-alibaba.png" alt="alibaba style e-commerce html template file" title="alibaba e-commerce html css theme"></a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTop" aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
				<span class="navbar-toggler-icon"></span>
			</button>

			<div class="collapse navbar-collapse" id="navbarTop">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">   Sourcing </a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-item" href="#">Top  Suppliers</a></li>
							<li><a class="dropdown-item" href="#">Suppliers by Regions </a></li>
							<li><a class="dropdown-item" href="#">Online Retailer  </a></li>
						</ul>
					</li>
					<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">   Services </a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-item" href="#">Trade Assurance </a></li>
							<li><a class="dropdown-item" href="#">Arabic</a></li>
							<li><a class="dropdown-item" href="#">Logistics Service </a></li>
							<li><a class="dropdown-item" href="#">Membership Services</a></li>
						</ul>
					</li>
					<li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">   Community </a>
						<ul class="dropdown-menu">
							<li><a class="dropdown-item" href="#">Help Center</a></li>
							<li><a class="dropdown-item" href="#">Submit a Dispute </a></li>
							<li><a class="dropdown-item" href="#">For Suppliers </a></li>
						</ul>
					</li>
				</ul>
				<ul class="navbar-nav">
					<li class="nav-item"><a href="#" class="nav-link" > Multi Request </a></li>
					<li class="nav-item"><a href="http://bootstrap-ecommerce.com/" class="nav-link" > Download  </a></li>

				</ul> <!-- navbar-nav.// -->
			</div> <!-- collapse.// -->
		</div>
	</nav>

	<section class="header-main shadow-sm">
		<div class="container">
			<div class="row-sm align-items-center">
				<div class="col-lg-4-24 col-sm-3">
					<div class="category-wrap dropdown py-1">
						<button type="button" class="btn btn-light  dropdown-toggle" data-toggle="dropdown" ><i class="fa fa-bars"></i> Categories</button>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">Machinery / Mechanical Parts / Tools </a>
							<a class="dropdown-item" href="#">Consumer Electronics / Home Appliances </a>
							<a class="dropdown-item" href="#">Auto / Transportation</a>
							<a class="dropdown-item" href="#">Apparel / Textiles / Timepieces </a>
							<a class="dropdown-item" href="#">Home & Garden / Construction / Lights </a>
							<a class="dropdown-item" href="#">Beauty & Personal Care / Health </a>
						</div>
					</div>
				</div>
				<div class="col-lg-11-24 col-sm-8">
					<form action="#" class="py-1">
						<div class="input-group w-100">
							<select class="custom-select"  name="category_name">
								<option value="">All type</option>
								<option value="">Special</option>
								<option value="">Only best</option>
								<option value="">Latest</option>
							</select>
							<input type="text" class="form-control" style="width:50%;" placeholder="Search">
							<div class="input-group-append">
								<button class="btn btn-warning" type="submit">
									<i class="fa fa-search"></i> Search
								</button>
							</div>
						</div>
					</form> <!-- search-wrap .end// -->
				</div> <!-- col.// -->
				<div class="col-lg-9-24 col-sm-12">
					<div class="widgets-wrap float-right row no-gutters py-1">
						<div class="col-auto">
							<div class="widget-header dropdown">
								<a href="#" data-toggle="dropdown" data-offset="20,10">
									<div class="icontext">
										<div class="icon-wrap"><i class="text-warning icon-sm fa fa-user"></i></div>
										<div class="text-wrap text-dark">
											Sign in <br>
											My account <i class="fa fa-caret-down"></i>
										</div>
									</div>
								</a>
								<div class="dropdown-menu">
									<form class="px-4 py-3">
										<div class="form-group">
											<label>Email address</label>
											<input type="email" class="form-control" placeholder="email@example.com">
										</div>
										<div class="form-group">
											<label>Password</label>
											<input type="password" class="form-control" placeholder="Password">
										</div>
										<button type="submit" class="btn btn-primary">Sign in</button>
									</form>
									<hr class="dropdown-divider">
									<a class="dropdown-item" href="#">Have account? Sign up</a>
									<a class="dropdown-item" href="#">Forgot password?</a>
								</div> <!--  dropdown-menu .// -->
							</div>  <!-- widget-header .// -->
						</div> <!-- col.// -->
						<div class="col-auto">
							<a href="#" class="widget-header">
								<div class="icontext">
									<div class="icon-wrap"><i class="text-warning icon-sm fa fa-shopping-cart"></i></div>
									<div class="text-wrap text-dark">
										Order <br> Protection
									</div>
								</div>
							</a>
						</div> <!-- col.// -->
						<div class="col-auto">
							<a href="#" class="widget-header">
								<div class="icontext">
									<div class="icon-wrap"><i class="text-warning icon-sm  fa fa-heart"></i></div>
									<div class="text-wrap text-dark">
										<span class="small round badge badge-secondary">0</span>
										<div>Favorites</div>
									</div>
								</div>
							</a>
						</div> <!-- col.// -->
					</div> <!-- widgets-wrap.// row.// -->
				</div> <!-- col.// -->
			</div> <!-- row.// -->
		</div> <!-- container.// -->
	</section> <!-- header-main .// -->
</header> <!-- section-header.// -->

<!-- ========================= SECTION CONTENT ========================= -->
<section class="section-content bg padding-y-sm">
	<div class="container">
		<div class="card">
			<div class="card-body">
				<div class="row">
					<div class="col-md-3-24"> <strong>Your are here:</strong> </div> <!-- col.// -->
					<nav class="col-md-18-24">
						<ol class="breadcrumb">
							<li class="breadcrumb-item"><a href="#">Home</a></li>
							<li class="breadcrumb-item"><a href="#">Category name</a></li>
							<li class="breadcrumb-item"><a href="#">Sub category</a></li>
							<li class="breadcrumb-item active" aria-current="page">Items</li>
						</ol>
					</nav> <!-- col.// -->
					<div class="col-md-3-24 text-right">
						<a href="#" data-toggle="tooltip" title="List view"> <i class="fa fa-bars"></i></a>
						<a href="#" data-toggle="tooltip" title="Grid view"> <i class="fa fa-th"></i></a>
					</div> <!-- col.// -->
				</div> <!-- row.// -->
				<hr>
				<div class="row">
					<div class="col-md-3-24"> <strong>Filter by:</strong> </div> <!-- col.// -->
					<div class="col-md-21-24">
						<ul class="list-inline">
							<li class="list-inline-item dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">   Supplier type </a>
								<div class="dropdown-menu p-3" style="max-width:400px;"">
								<label class="form-check">
									<a href="#">
										<input type="checkbox" class="form-check-input"> Good supplier
									</a>
								</label>
								<label class="form-check">
									<a href="#">
										<input type="checkbox" class="form-check-input"> Best supplier
									</a>
								</label>
								<label class="form-check">
									<a href="#">
										<input type="checkbox" class="form-check-input"> New supplier
									</a>
								</label>
					</div> <!-- dropdown-menu.// -->
					</li>
					<li class="list-inline-item dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">  Country </a>
						<div class="dropdown-menu p-3" style="max-width:400px;"">
						<label class="form-check">
							<a href="#">
								<input type="checkbox" class="form-check-input"> China
							</a>
						</label>
						<label class="form-check">
							<a href="#">
								<input type="checkbox" class="form-check-input"> Japan
							</a>
						</label>
						<label class="form-check">
							<a href="#">
								<input type="checkbox" class="form-check-input"> Uzbekistan
							</a>
						</label>
						<label class="form-check">
							<a href="#">
								<input type="checkbox" class="form-check-input"> Russia
							</a>
						</label>
				</div> <!-- dropdown-menu.// -->
				</li>
				<li class="list-inline-item"><a href="#">Product type</a></li>
				<li class="list-inline-item"><a href="#">Brand name</a></li>
				<li class="list-inline-item"><a href="#">Color</a></li>
				<li class="list-inline-item"><a href="#">Size</a></li>
				<li class="list-inline-item">
					<div class="form-inline">
						<label class="mr-2">Price</label>
						<input class="form-control form-control-sm" placeholder="Min" type="number">
						<span class="px-2"> - </span>
						<input class="form-control form-control-sm" placeholder="Max" type="number">
						<button type="submit" class="btn btn-sm ml-2">Ok</button>
					</div>
				</li>
				</ul>
			</div> <!-- col.// -->
		</div> <!-- row.// -->
	</div> <!-- card-body .// -->
	</div> <!-- card.// -->

	<div class="padding-y-sm">
		<span>3897 results for "Item"</span>
	</div>

	<div class="row-sm">
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/1.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">Good item name</a>
					<div class="price-wrap">
						<span class="price-new">$1280</span>
						<del class="price-old">$1980</del>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/2.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">The name of product</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/3.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">Good item name</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/4.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">Good item name</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/5.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">Good item name</a>
					<div class="price-wrap">
						<span class="price-new">$1280</span>
						<del class="price-old">$1980</del>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/6.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">The name of product</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/7.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">The name of product</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/1.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">The name of product</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/2.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">The name of product</a>
					<div class="price-wrap">
						<span class="price-new">$1280</span>
						<del class="price-old">$1980</del>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/3.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">The name of product</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/4.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">The name of product</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
		<div class="col-md-3 col-sm-6">
			<figure class="card card-product">
				<div class="img-wrap"> <img src="images/items/6.jpg"></div>
				<figcaption class="info-wrap">
					<a href="#" class="title">The name of product</a>
					<div class="price-wrap">
						<span class="price-new">$280</span>
					</div> <!-- price-wrap.// -->
				</figcaption>
			</figure> <!-- card // -->
		</div> <!-- col // -->
	</div> <!-- row.// -->


	</div><!-- container // -->
</section>
<!-- ========================= SECTION CONTENT .END// ========================= -->


<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-secondary">
	<div class="container">
		<section class="footer-top padding-top">
			<div class="row">
				<aside class="col-sm-3 col-md-3 white">
					<h5 class="title">Customer Services</h5>
					<ul class="list-unstyled">
						<li> <a href="#">Help center</a></li>
						<li> <a href="#">Money refund</a></li>
						<li> <a href="#">Terms and Policy</a></li>
						<li> <a href="#">Open dispute</a></li>
					</ul>
				</aside>
				<aside class="col-sm-3  col-md-3 white">
					<h5 class="title">My Account</h5>
					<ul class="list-unstyled">
						<li> <a href="#"> User Login </a></li>
						<li> <a href="#"> User register </a></li>
						<li> <a href="#"> Account Setting </a></li>
						<li> <a href="#"> My Orders </a></li>
						<li> <a href="#"> My Wishlist </a></li>
					</ul>
				</aside>
				<aside class="col-sm-3  col-md-3 white">
					<h5 class="title">About</h5>
					<ul class="list-unstyled">
						<li> <a href="#"> Our history </a></li>
						<li> <a href="#"> How to buy </a></li>
						<li> <a href="#"> Delivery and payment </a></li>
						<li> <a href="#"> Advertice </a></li>
						<li> <a href="#"> Partnership </a></li>
					</ul>
				</aside>
				<aside class="col-sm-3">
					<article class="white">
						<h5 class="title">Contacts</h5>
						<p>
							<strong>Phone: </strong> +123456789 <br>
							<strong>Fax:</strong> +123456789
						</p>

						<div class="btn-group white">
							<a class="btn btn-facebook" title="Facebook" target="_blank" href="#"><i class="fab fa-facebook-f  fa-fw"></i></a>
							<a class="btn btn-instagram" title="Instagram" target="_blank" href="#"><i class="fab fa-instagram  fa-fw"></i></a>
							<a class="btn btn-youtube" title="Youtube" target="_blank" href="#"><i class="fab fa-youtube  fa-fw"></i></a>
							<a class="btn btn-twitter" title="Twitter" target="_blank" href="#"><i class="fab fa-twitter  fa-fw"></i></a>
						</div>
					</article>
				</aside>
			</div> <!-- row.// -->
			<br>
		</section>
		<section class="footer-bottom row border-top-white">
			<div class="col-sm-6">
				<p class="text-white-50"> Made with <3 <br>  by Vosidiy M.</p>
			</div>
			<div class="col-sm-6">
				<p class="text-md-right text-white-50">
					Copyright &copy  <br>
					<a href="http://bootstrap-ecommerce.com" class="text-white-50">Bootstrap-ecommerce UI kit</a>
				</p>
			</div>
		</section> <!-- //footer-top -->
	</div><!-- //container -->
</footer>
<!-- ========================= FOOTER END // ========================= -->


</body>
</html>